<template>
  <div class="maxbox" @scroll="scrollWindow">
    <div v-show="flag" class="ceiling">
      <img src="@/assets/imgs/favicon.png" alt="" />
    </div>
    <van-swipe :autoplay="2000" lazy-render>
      <van-swipe-item
        @click="$router.push('/details?id=' + image.ids)"
        v-for="image in images"
        :key="image"
      >
        <img class="top-img-banner" :src="image.picUrl" />
      </van-swipe-item>
    </van-swipe>
    <homeTask></homeTask>

    <div @click="$router.push('/bargainBox')">
      <typeTitle> 全民砍价 > </typeTitle>
    </div>

    <Commodity-card
      @click="$router.push('/details?id=' + cardList.id)"
      :cardList="cardList"
    ></Commodity-card>

    <div class="TOPmARGIN">
      <typeTitle @click="$router.push('/strictCard')"> 精选专题 > </typeTitle>
      <div class="siftbox">
        <siftCard
          @click="$router.push('/lookDetails?id=' + v.id)"
          v-for="(v, i) in siftObj"
          :key="i"
          :siftObj="v"
        ></siftCard>
      </div>
    </div>

    <div class="TOPmARGIN">
      <typeTitle @click="$router.push('/moods')"> 人气推荐 > </typeTitle>
      <div class="moods">
        <moodsCard
          v-for="(v, i) in moodsListData"
          :key="i"
          :moodsList="v"
          @click="$router.push('/details?id=' + v.id)"
        >
        </moodsCard>
      </div>
    </div>
  </div>
</template>

<script>
import { getBanners, getCardList, siftObj, moodsList } from "@/api";
import { ref, reactive, toRefs } from "vue";
import homeTask from "@/components/homeTask";
import CommodityCard from "@/components/CommodityCard";
import typeTitle from "@/components/slot/typeTitle";
import siftCard from "@/components/cardComponents/siftCard";
import strictCard from "@/components/cardComponents/strictCard";
import moodsCard from "@/components/cardComponents/moodsCard";
export default {
  setup(props) {
    const images = ref([]);
    const obj = reactive({
      cardList: {},
      siftObj: {},
      moodsListData: {},
    });
    let flag = ref(false);
    getBanners().then((result) => {
      // 轮播图的数据
      console.log("dwawdadwa", result);
      let ids = [99766, 100027, 99764];
      let results = result.map((item, index) => {
        return {
          ...item,
          ids: ids[index],
        };
      });
      console.log("243", results);
      images.value = results;
    });

    getCardList().then((res) => {
      // 砍价模块的数据
      let { result } = res;
      obj.cardList = res.goodsMap[result[0].goodsId];
    });
    siftObj().then((res) => {
      // 精选的数据
      obj.siftObj = res;
    });

    moodsList().then((res) => {
      console.log("idaw", res);
      if (res.code != 0) return;
      obj.moodsListData = res.data.slice(9, 13);
      // 人气推荐的数据
    });
    function scrollWindow() {
      if (event.target.scrollTop > 500) {
        flag.value = true;
      } else if (event.target.scrollTop < 200) {
        flag.value = false;
      }
    }

    return {
      images,
      ...toRefs(obj),
      scrollWindow,
      flag,
    };
  },
  components: {
    homeTask,
    CommodityCard,
    typeTitle,
    siftCard,
    strictCard,
    moodsCard,
  },
};
</script>

<style lang="scss" scoped>
.top-img-banner {
  width: 100%;
  height: 650px;
}
.ceiling {
  width: 100%;
  height: 80px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  img {
    width: 80px;
    height: 80px;
    margin: auto;
  }
}
.maxbox {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.moods {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: rgb(250, 245, 245);
  padding-left: 8px;
}
.siftbox {
  display: flex;
  flex-shrink: 0;
  overflow: auto;
}
.TOPmARGIN {
  margin-top: 26px;
}
</style>
